<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数字大屏</title>
    <link rel="stylesheet" href="../views/static/common/layui/css/layui.css">
    <link rel="stylesheet" href="../views/static/admin/css/style.css">
    <script src="../views/static/common/layui/layui.js"></script>
    <script src="../views/static/common/jquery-3.3.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.src.js"></script>
    <link rel="stylesheet" href="../views/static/admin/css/bootstrap.min.css" />
	<link rel="stylesheet" href="../views/static/admin/css/app.css" />
</head>
<body>
    <header class="header">
        <h3>数字大屏</h3>
    </header>
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row fill-h">
                <div class="col-lg-7 fill-h">
                    <div class="xpanel-wrapper xpanel-wrapper-1">
                        <div class="xpanel">
                            <div class="fill-h" id="bmapChart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 fill-h">
                    <div class="xpanel-wrapper xpanel-wrapper-2">
                        <div class="xpanel">
                            <div class="fill-h" id="heatmapChart"></div>
                        </div>
                    </div>
                    <div class="xpanel-wrapper xpanel-wrapper-2">
                        <div class="xpanel">
                            <div class="fill-h" id="coordChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 条形图
        $.ajaxSettings.async = false;
        $.get('${pageContext.request.contextPath}/home/findHomeNum',function(nums){
            window.nums = nums;
        })
        $.ajaxSettings.async = true;
        var chart = Highcharts.chart('bmapChart', {
        chart: {
            type: 'bar'
        },
        title: {
            text: '房间状态统计条形图'
        },
        xAxis: {
            categories: ['普通房', '标准房', '豪华房', '高级房', '钟点房'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '房间数量 (间)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' 间'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    allowOverlap: false // 允许数据标签重叠
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        series: [{
            name: '空房',
            // data: [2,6,2,10,6]
            data: [nums[0], nums[1], nums[2], nums[3], nums[4]]
        }, {
            name: '未打扫',
            // data: [1,2,0,1,1]
            data: [nums[5], nums[6], nums[7], nums[8], nums[9]]
        }, {
            name: '已入住',
            // data: [11,2,3,9,12]
            data: [nums[10], nums[11], nums[12], nums[13], nums[14]]
        }]
    });
    var sum = 0 
    for(var i=0;i<15;i++){
        sum += nums[i]
    } 
    // 扇形图
    var chart = Highcharts.chart('heatmapChart', {
	title: {
		text: '房型<br>占比',
		align: 'center',
		verticalAlign: 'middle',
		y: 50
	},
	tooltip: {
		headerFormat: '{series.name}<br>',
		pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>',
	},
	plotOptions: {
		pie: {
			dataLabels: {
				enabled: true,
				distance: -30,
				style: {
					fontWeight: 'bold',
					color: 'white',
					textShadow: '0px 1px 2px black'
				}
			},
			startAngle: -90, // 圆环的开始角度
			endAngle: 90,    // 圆环的结束角度
			center: ['50%', '75%']
		}
	},
	series: [{
		type: 'pie',
		name: '房间占比',
		innerSize: '50%',
		data: [
			['普通房',(nums[0] + nums[5]+nums[10] ) *100 / sum],
			['标准房',(nums[1] + nums[6]+nums[11] )*100 / sum],
			['豪华房',(nums[2] + nums[7]+nums[12] )*100 / sum],
			['高级房',(nums[3] + nums[8]+nums[13] )*100 / sum],
			['钟点房',(nums[4] + nums[9]+nums[14] )*100 / sum],
		]
	}]
});

    // 柱状图
    var chart = Highcharts.chart('coordChart',{
	chart: {
		type: 'column'
	},
	title: {
		text: '房间数量汇总柱状图'
	},
	xAxis: {
		categories: [
			'普通房','标准房','豪华房','高级房','钟点房'
		],
		crosshair: true
	},
	yAxis: {
		min: 0,
		title: {
			text: '房间数 (间)'
		}
	},
	tooltip: {
		// head + 每个 point + footer 拼接成完整的 table
		headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		'<td style="padding:0"><b>{point.y} 间</b></td></tr>',
		footerFormat: '</table>',
		shared: true,
		useHTML: true
	},
	plotOptions: {
		column: {
			borderWidth: 0
		}
	},
	series: [{
		name: "数量",
		data: [nums[0] + nums[5]+nums[10],nums[1] + nums[6]+nums[11],nums[2] + nums[7]+nums[12], nums[3] + nums[8]+nums[13],nums[4] + nums[9]+nums[14] ]
	},]
});

    </script>
<!-- <script src="../views/static/admin/js/config.js"></script>
<script src="../views/static/admin/js/script.js"></script> -->

</body>
</html>
